<template>
	<view class="ys">
		<y-header></y-header>
		<view class="userbody">
			<y-bread :name="pageName"></y-bread>
			<view class="usermain">
				<view class="left">
					<y-usermenu></y-usermenu>
				</view>
				<view class="right">
					<view class="orderlist-title">
						<text>{{$t('index.hyds')}}</text>
					</view>
					<view class="pointbox">
						<view class="point_col">
							<view class="pointnum">
								{{balance_1}}
							</view>
							<view class="pointtext">
								{{$t('index.xjjf')}}
							</view>
						</view>
						<view class="point_col">
							<view class="pointnum">
								{{balance_4}}
							</view>
							<view class="pointtext">
								{{$t('index.bdjf')}}
							</view>
						</view>
					</view>
					<view class="orderlist">
						<view class="no_list" v-if="list.length == 0">
							<image src="/static/icon/no_point.svg" mode="widthFix"></image>
							<text>{{$t('index.mqswds')}}</text>
						</view>
						<view class="pointlist">
							<view class="pointitem" v-for="(item,index) in list" :key="index">
								<view class="point-top">
									<view class="point-title">
										{{item.remarks}}
									</view>
									<view class="point-num">
										<text v-if="item.inc_dec == 0">-</text>
										<text v-else-if="item.inc_dec == 1">+</text>
										${{item.balance}}
									</view>
								</view>
								<view class="point-time">
									{{item.create_time}}
								</view>
							</view>
							<view class="more" v-if="page<last_page" @click="showMore">
								{{$t('index.xsgd')}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<y-model :modelMsg="modelMsg" :showModel="showModel" @getModel="getModel"></y-model>
		</view>
	</view>
</template>

<script>
	import {
		finance,
		getData
	} from "@/api/user.js"
	export default {
		data() {
			return {
				pageName: this.$t('index.hyds'),
				list: [],
				modelMsg: this.$t('index.qrqxcdd'),
				showModel: false,
				page: 1,
				last_page: 1,
				point: '0',
				balance_1: 0,
				balance_4: 0
			}
		},
		onLoad() {
			this.getData()
			this.finance()
		},
		methods: {
			getData() {
				getData().then(res => {
					this.point = res.data.reward
					this.balance_1 = res.data.user.balance_1
					this.balance_4 = res.data.user.balance_4

				})
			},
			showMore() {
				if (this.page < this.last_page) {
					this.finance()
				}
			},
			finance() {
				finance({
					page: this.page
				}).then(res => {
					this.list = this.list.concat(res.data.data)
					this.last_page = res.data.last_page
				})
			}
		}
	}
</script>

<style lang="scss">
	.userbody {
		max-width: 1180px;
		margin: 0 auto;
		margin-top: 20px;
		padding: 10px;
		box-sizing: border-box;
	}

	.more {
		text-align: center;
		color: #4a4e5c;
		font-size: 14px;
		margin-top: 30px;
	}

	.usermain {
		display: flex;
		justify-content: space-between;

		.left {
			box-sizing: border-box;
			width: 25%;
			max-width: 265px;
			margin-top: 20px;
			margin-bottom: 20px;
		}

		.right {
			box-sizing: border-box;
			width: 75%;
			padding-right: 1%;
			margin-top: 20px;
			margin-bottom: 20px;

			.orderlist {
				margin-top: 15px;

				.pointlist {
					max-height: 50vh;
					overflow-y: scroll;

					&::-webkit-scrollbar {
						display: none;
						/* Chrome Safari */
					}

					.pointitem {
						border-bottom: 1px solid #e8e8e8;
						padding: 15px;
						box-sizing: border-box;

						.point-top {
							display: flex;
							align-items: center;
							justify-content: space-between;
						}

						.point-time {
							font-size: 14px;
							color: #999;
							margin-top: 10px;
						}
					}
				}
			}

			.pointbox {
				display: flex;
				width: 100%;
				border-radius: 4px;
				border: 1px solid #e8e8e8;
				padding: 22px 0px;
				display: flex;
				align-items: center;
				justify-content: space-around;

				margin: 20px auto;

				.point_col {
					display: flex;
					flex-direction: column;
				}

				.pointnum {
					font-size: 24px;
					font-weight: bold;
					margin-bottom: 5px;
				}
			}

			.orderlist-title {
				font-size: 22px;
				border-left: 3px solid #4a4e5c;
				padding-left: 7px;
			}

			.no_list {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: 14px;
				color: #999;
				margin-top: 50px;

				image {
					width: 120px;
				}
			}

		}
	}

	@media (max-width:768px) {
		.usermain {
			.left {
				display: none;
			}

			.right {
				width: 100%;
				padding: 0;

			}
		}

		.pc {
			display: none;
		}
	}
</style>